<script setup>
import {isNotNull} from "../util/index.js";

/**
 * pageInfo 详细格式
 *
 * currentPage: 当前第几页，默认 1
 * pageSize: 每页多少条，默认 5
 * total: 一共多少条
 * callback: 分页回调函数
 */
let parent = defineProps({
  // 分页信息：详细格式查看文档注释
  pageInfo: {type: Object, required: true},
  // 是否显示背景，默认 true
  background: {type: Boolean, required: false, default: true},
  // 分页功能列表，默认 'total, sizes, prev, pager, next, jumper'
  layout: {type: String, required: false, default: 'total, sizes, prev, pager, next, jumper'},
  // 每页多少条可选数量，默认 [1, 5, 10, 18]
  pageSizes: {type: Array, required: false, default: [1, 5, 10, 18]},
});
</script>

<template>
  <el-pagination class="my-pager"
                 :background="background"
                 :layout="layout"
                 :page-sizes="pageSizes"
                 :current-page="isNotNull(pageInfo['currentPage']) ? pageInfo['currentPage'] : 1"
                 :page-size="isNotNull(pageInfo['pageSize']) ? pageInfo['pageSize'] : 5"
                 :total="pageInfo['total']"
                 @size-change="pageSize => pageInfo['callback'](pageInfo['currentPage'], pageSize)"
                 @current-change="currentPage => pageInfo['callback'](currentPage, pageInfo['pageSize'])"/>
</template>

<style scoped lang="scss">
.my-pager {
  margin: 20px; // 外边距
  justify-content: center; // 自居中
}
</style>